<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>供货界面</title>
  <link rel="stylesheet" href="mifengmi.css">
</head>

<body>
  <nav class="navbar">
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="products.html">商城</a></li>
      <li><a href="supply.html">供货</a></li>
    </ul>
  </nav>

  <div class="content">
    <h1>供货界面</h1>
    <div class="product-grid" id="productGrid">
      <!-- 商品方块 -->
    </div>
  </div>

  <!-- 添加商品模态框 -->
  <div id="addProductModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div class="form-container">
        <h2>添加商品</h2>
        <form id="addProductForm">
          <label for="productName">商品名称:</label>
          <input type="text" id="productName" name="productName" required>
          <label for="productPrice">商品价格:</label>
          <input type="number" id="productPrice" name="productPrice" required>
          <label for="productImage">商品图片:</label>
          <input type="file" id="productImage" name="productImage" accept="image/*">
          <button type="submit">添加商品</button>
        </form>
      </div>
    </div>
  </div>

  <!-- 删除商品模态框 -->
  <div id="deleteProductModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div class="form-container">
        <h2>删除商品</h2>
        <ul id="productList" class="product-list"></ul>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const productGrid = document.getElementById('productGrid');
      const addProductModal = document.getElementById('addProductModal');
      const deleteProductModal = document.getElementById('deleteProductModal');
      const addProductForm = document.getElementById('addProductForm');
      const closeModal = document.querySelectorAll('.close');
      const productList = document.getElementById('productList');

      function displayProducts() {
        const products = JSON.parse(localStorage.getItem('products')) || [];
        productGrid.innerHTML = '';
        products.forEach((product) => {
          const productCard = document.createElement('div');
          productCard.className = 'product-card';
          productCard.style.backgroundImage = `url(${product.image || 'images/default.png'})`;
          productCard.innerHTML = `
            <h3>${product.name}</h3>
            <p>¥${product.price}</p>
          `;
          productGrid.appendChild(productCard);
        });

        // 添加一个用于添加新商品的方块
        const addCard = document.createElement('div');
        addCard.className = 'product-card add-card';
        addCard.innerHTML = `<span>+</span>`;
        addCard.addEventListener('click', () => {
          addProductModal.style.display = 'block';
        });
        productGrid.appendChild(addCard);

        // 添加一个用于删除商品的方块
        const deleteCard = document.createElement('div');
        deleteCard.className = 'product-card add-card';
        deleteCard.innerHTML = `<span>-</span>`;
        deleteCard.addEventListener('click', () => {
          deleteProductModal.style.display = 'block';
          displayProductList();
        });
        productGrid.appendChild(deleteCard);
      }

      function displayProductList() {
        const products = JSON.parse(localStorage.getItem('products')) || [];
        productList.innerHTML = '';
        products.forEach((product, index) => {
          const listItem = document.createElement('li');
          listItem.className = 'product-list-item';
          listItem.innerHTML = `
            <span>${product.name} - ¥${product.price}</span>
            <button class="delete-button" data-index="${index}">x</button>
          `;
          productList.appendChild(listItem);
        });

        document.querySelectorAll('.delete-button').forEach(button => {
          button.addEventListener('click', (event) => {
            const index = event.target.getAttribute('data-index');
            products.splice(index, 1);
            localStorage.setItem('products', JSON.stringify(products));
            displayProductList();
            displayProducts();
          });
        });
      }

      addProductForm.addEventListener('submit', (event) => {
        event.preventDefault();
        const productName = document.getElementById('productName').value;
        const productPrice = document.getElementById('productPrice').value;
        const productImageInput = document.getElementById('productImage');
        const file = productImageInput.files[0];

        const products = JSON.parse(localStorage.getItem('products')) || [];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            products.push({ name: productName, price: productPrice, image: e.target.result });
            localStorage.setItem('products', JSON.stringify(products));
            displayProducts();
            addProductModal.style.display = 'none';
            addProductForm.reset();
          };
          reader.readAsDataURL(file);
        } else {
          products.push({ name: productName, price: productPrice });
          localStorage.setItem('products', JSON.stringify(products));
          displayProducts();
          addProductModal.style.display = 'none';
          addProductForm.reset();
        }
      });

      closeModal.forEach(button => {
        button.addEventListener('click', () => {
          addProductModal.style.display = 'none';
          deleteProductModal.style.display = 'none';
        });
      });

      window.addEventListener('click', (event) => {
        if (event.target === addProductModal) {
          addProductModal.style.display = 'none';
        }
        if (event.target === deleteProductModal) {
          deleteProductModal.style.display = 'none';
        }
      });

      displayProducts();
    });
  </script>
</body>

</html>